<template>
    <div class="detail-header">
      <div class="header-top clearflx">
        <div class="left">
          <p>
            <router-link to="/" class="top_nav">会展网首页</router-link> |
            <router-link to="/info" class="top_nav">展会信息</router-link> |
            <router-link to="/server" class="top_nav">展会服务</router-link> |
            <router-link to="/consult" class="top_nav">展会资讯：</router-link>
            <span>北京 上海 广州 深圳 杭州 成都 青岛 更多...</span>
          </p>
        </div>
        <div class="right">
          <router-link to="/login">登录</router-link>|
          <router-link to="/register">注册</router-link>
        </div>
      </div>
    </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.detail-header {
  width: 1200px;
  // height: 160px;
  padding: 10px 0px;
  margin: 10px auto;
  .header-top {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #8d8d8d;
    // padding: 10px 0;
    .left {
      float: left;
      p {
        font-size: 20px;
        .top_nav {
          color: #8d8d8d;
          &:hover {
            color: #c81622;
          }
        }
        span {
          font-size: 16px;
        }
      }
    }
    .right {
      float: right;
      font-size: 20px;
      a {
        color: #8d8d8d;
        padding-right: 6px;
        &:hover {
          color: #c81622;
        }
      }
    }
  }
  .header-bottom {
    width: 100%;
    // height: 100px;
    margin-top: 10px;
    // position: relative;
    .left {
      float: left;
      // position: absolute;
      // top: 50%;
      // left: 0;
      // transform: translate(0, -50%);
      img {
        width: 100%;
        display: block;
      }
    }
    .right {
      float: right;
      width: 630px;
      // position: absolute;
      // top: 50%;
      // right: 0;
      // transform: translate(0, -50%);
      img {
        width: 100%;
        display: block;
      }
    }
  }
}
</style>